﻿@model IEnumerable<WriterStars.Models.ViewModels.BookViewModel>
@{
    this.Layout = "~/Views/Shared/_Layout.cshtml";
    var categories = this.ViewBag.Categories as List<WriterStars.Model.Category>;
    if (categories == null) { categories = new List<WriterStars.Model.Category>(); }
}


<section class="table-responsive">
    <table class="table table-striped table-bordered table-condensed">
        <thead>
            <tr>
                <td>Id</td>
                <td>Name</td>
                <td>Author</td>
                <td>Blog</td>
                <td>Category</td>
                <td>Action</td>
            </tr>
        </thead>
        <tbody>
            @foreach (var book in Model)
            {
                <tr data-book-id="@book.Id">
                    <td class="text-center">@book.Id</td>
                    <td>
                        <a href="/Book/Read/@book.Id">
                            @book.Title
                        </a>
                    </td>
                    <td>
                        <a href="/writer/details/@book.AuthorId">
                            @book.AuthorName
                        </a>
                    </td>
                    <td>
                        @if (book.IsBlogBook)
                        {
                            <button class="btn btn-danger removeFromBlog" data-book-id="@book.Id">Remove from blog</button>
                        }
                        else
                        {
                            <button data-book-id="@book.Id" class="btn btn-warning addToBlog">Add to blog</button>
                        }
                    </td>

                    <td>
                        <select class="category-select" data-book-id="@book.Id">
                            <option value="0">Uncategorized</option>
                            @foreach (var item in categories)
                            {
                                <option value="@item.Id" @(item.Id == book.CategoryId ? "selected" : "")>@item.Name</option>
                            }
                        </select>

                    </td>
                    <td class="text-center">
                        <span class="permaDelete fa fa-fw fa-times text-danger" data-type="button" data-book-id="@book.Id"></span>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</section>

<div id="permaRemoveModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Confirm permanent remove</h4>
            </div>
            <div class="modal-body">
                <p>Do you want to permanently delete this book</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id="removeConfirmed" type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@section scripts{
    <script>
        $(function () {
            $('.addToBlog').on('click', function () {
                var $this = $(this)
                var id = $this.data('book-id');
                $.post('/Admin/AddToBlog', 'id=' + id, function () {
                    $this.removeClass('btn-warning')
                        .removeClass('addToBlog')
                        .addClass('btn-success')
                        .addClass('removeFromBlog')
                        .html('Remove from Blog');
                });

            });

            $('.removeFromBlog').on('click', function () {
                var $this = $(this)
                var id = $this.data('book-id');
                $.post('/Admin/RemoveFromBlog', 'id=' + id, function () {
                    $this.removeClass('btn-danger')
                        .removeClass('removeFromBlog')
                        .addClass('btn-warning')
                        .addClass('addToBlog')
                        .html('Add to Blog');
                });
            });

            $('.category-select').change(function () {
                var $self = $(this),
                    bookId = $self.data('book-id'),
                    selectedCategory = $self.find(':selected').val();
                var data = 'id=' + bookId + '&category=' + selectedCategory;
                $.post('/Admin/ChangeCategory', data, function () {
                    console.log('success');
                });
            });

            var permaDeleteBookId = 0;
            $('.permaDelete').click(function () {
                permaDeleteBookId = $(this).data('book-id');
                console.log(permaDeleteBookId)
                $('#permaRemoveModal').modal({
                    show: true,
                    backdrop: false
                });
            });

            $('#removeConfirmed').click(function () {
                $('#permaRemoveModal').modal('hide');

                var response = $.post('/book/remove', 'id=' + permaDeleteBookId);

                response.error(function () {
                    console.log('Error occured, book may not be deleted. Please refresh the page');
                });

                response.success(function () {
                    $('tr[data-book-id="' + permaDeleteBookId + '"]').hide('fade');
                });
            });
        })
    </script>
}